<template>
  <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%"
  >
    <el-table-column
      label="课程编号"
      prop="courseNumber"
    />
    <el-table-column
      label="课程名字"
      prop="courseName"
    />
    <el-table-column
      align="center"
      label="操作"
    >
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >删除课程</el-button>
      </template>

    </el-table-column>
  </el-table>
</template>
<script>

import request from '@/utils/request'

export default {
  name: 'Index',
  data() {
    return {
      tableData: [{
        id: '',
        courseNumber: '',
        courseName: ''
      }],
      search: ''
    }
  },
  mounted() {
    var userId = localStorage.getItem('userId')
    this.CourseData(userId)
  },
  methods: {
    CourseData() {
      var userId = localStorage.getItem('userId')
      request.get('/CourseData/' + userId).then((res) => {
        this.tableData = res.data
      })
    },
    handleDelete(index, row) {
      var userId = localStorage.getItem('userId')
      request.get('/DeleteCourse/' + row.id + '/' + userId).then((res) => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        this.CourseData()
      })
    }
  }
}
</script>

<style scoped>

</style>
